<template>
    <div ref="scroll" class="scroll">
        <ul>
            <li v-for="(item,index) in listData" :key="index">
                <span v-text="item.name"></span>
                <span v-text="item.age"></span>
            </li>
        </ul>
    </div>
</template>
<style>
*{
    margin: 0;
    padding: 0;
}
.scroll{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #f5f5ff;
}
li{
    list-style: none;
    box-shadow: 0 2px 2px 1px #999;
    line-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>

<script>
import BScroll from 'better-scroll';
import { get, post } from '../assets/js/ajax.js'
export default {
    name : 'scrollView',
    props : {
        scrollX : { // 是否为横向滚动 默认 是
            default : true, 
            type : Boolean
        },
        scrollY : { // 是否为纵向滚动 默认 否
            default : false,
            type : Boolean
        },
        startX : {  // 横轴方向初始化位置
            default : 0,
            type : Number
        },
        startY : { // 纵轴方向初始化位置
            default : 0,
            type : Number
        },
    },
    data : function(){
        return{
            listData :[],
            selfScroll : null
        }
    },
    mounted(){
    var _this = this;
    try {
         post('http://localhost:8089',{
             page:0,
             count:20
         })
        .then((res)=>{
            console.log(res); 
            _this.listData = JSON.parse(res).data;
            var el = this.$refs.scroll;
            var option = {
                pullDownRefresh: {
                    threshold: 10,
                    stop: 20
                },
                pullUpLoad: {
                    threshold: 50
                },

            };
            this.selfScroll = new BScroll(el,option);
        })
        .catch(error=>{
            console.log("ddddd",error);
        })
    } catch (error) {
        console.log("ddddd");
    }
    // var xhr = new XMLHttpRequest();            
    // xhr.open('GET', 'http://localhost:8089?page=0&count=20', true);
    // xhr.onreadystatechange = function() {
    // // readyState == 4说明请求已完成
    // if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
    //     // 从服务器获得数据 
    //     // fn.call(this, xhr.responseText); 
    //     console.log(xhr.responseText); 
    //     _this.listData = JSON.parse(xhr.responseText).data;
    // }
    // };
    // xhr.send();

    //     var el = this.$refs.scroll;
    //     var option = {
    //         pullDownRefresh: {
    //             threshold: 10,
    //             stop: 20
    //         },
    //         pullUpLoad: {
    //             threshold: 50
    //         },

    //     };
    //     this.selfScroll = new BScroll(el,option);
    }
}
</script>
